<template>
  <div style="">
    <div class="top">
      <Row type="flex" justify="left" style="margin: 10px">
        <Col span="6" style="margin: 60px 0">
          <Row
            v-for="(item, index) in bloc.peopleSex"
            :key="index"
            type="flex"
            justify="space-between"
            align="middle"
            :style="{
              color:
                item.sex == '1'
                  ? 'rgb(238, 101, 110)'
                  : item.sex == '2'
                  ? 'rgb(151, 151, 151)'
                  : '',
              margin: index == 1 ? '30px 0' : '',
            }"
          >
            <Icon
              v-if="item.sex == '0'"
              type="ios-man"
              size="50"
              color="rgb(45, 140, 240)"
            />
            <Icon
              v-if="item.sex == '1'"
              type="ios-man"
              size="50"
              color="rgb(238, 101, 110)"
            />
            <Icon
              v-if="item.sex == '2'"
              type="ios-man"
              size="50"
              color="rgb(151, 151, 151)"
            />
            <div style="margin-right: 10px">
              <div v-if="item.sex == '0'">男性</div>
              <div v-if="item.sex == '1'">女性</div>
              <div v-if="item.sex == '2'">未知</div>
              <Row type="flex" align="bottom">
                <h1>{{ item.num }}</h1>
                <span style="margin-bottom: 5px">人</span>
              </Row>
            </div>
            <i-circle
              :percent="item.percentage"
              :size="80"
              :stroke-width="8"
              :stroke-color="
                item.sex == '1'
                  ? 'rgb(238, 101, 110)'
                  : item.sex == '2'
                  ? 'rgb(151, 151, 151)'
                  : 'rgb(45, 140, 240)'
              "
            >
              <span class="demo-Circle-inner" style="font-size: 20px"
                >{{ item.percentage }}%</span
              >
            </i-circle>
          </Row>
        </Col>
        <Col span="2"></Col>
        <Col span="7">
          <div id="myChart2" :style="{ width: '100%', height: '100%' }"></div>
        </Col>
        <Col span="2"></Col>
        <Col span="7">
          <div id="myChart3" :style="{ width: '100%', height: '100%' }"></div>
        </Col>
      </Row>
      <Row type="flex" justify="center" style="margin: 80px 10px 10px 10px">
        <DatePicker
          type="daterange"
          placeholder="注册时间"
          format="yyyy/MM"
          v-model="bloc.dateRegister"
          :editable="false"
          :clearable="false"
          style="width: 200px; margin-right: 10px"
        />
        <Button
          type="primary"
          icon="ios-search"
          size="default"
          @click="getPeopleRegister()"
          >查询
        </Button>
      </Row>
      <Row
        type="flex"
        justify="space-between"
        class="code-row-bg"
        style="padding: 20px 20px 60px 20px; height: 500px"
        :gutter="50"
      >
        <div id="myChart" :style="{ width: '100%', height: '100%' }"></div>
      </Row>
      <Row type="flex" justify="center" style="margin: 80px 10px 10px 10px">
        <Select
          v-model="bloc.province"
          style="width: 200px; margin-right: 10px"
          placeholder="省份"
          clearable
          filterable
        >
          <Option
            v-for="(item, index) in bloc.provinceList"
            :key="index"
            :value="item.name"
            >{{ item.name }}</Option
          >
        </Select>
        <Select
          v-model="bloc.modelId"
          style="width: 200px; margin-right: 10px"
          placeholder="型号"
          clearable
          filterable
        >
          <Option
            v-for="(item, index) in bloc.modelList"
            :key="index"
            :value="item.id"
            >{{ item.modelName }}</Option
          >
        </Select>
        <DatePicker
          type="daterange"
          placeholder="统计时间"
          format="yyyy/MM/dd"
          v-model="bloc.date2"
          :clearable="false"
          style="width: 200px; margin-right: 10px"
        />
        <Button
          type="primary"
          icon="ios-search"
          size="default"
          @click="getMemberWeekRegister()"
          >查询
        </Button>
      </Row>
      <Row type="flex" justify="center">
        <div style="margin: 10px 20px 10px 0;font-size: 18px;">
          {{ bloc.txt1 }}
        </div>
      </Row>
      <Row
        type="flex"
        justify="space-between"
        class="code-row-bg"
        style="padding: 20px 20px 60px 20px; height: 500px"
        :gutter="50"
      >
        <div id="myChart4" :style="{ width: '100%', height: '100%' }"></div>
      </Row>
      <Row type="flex" justify="center" style="margin: 80px 10px 10px 10px">
        <RadioGroup v-model="bloc.range3">
            <Radio :label="0">省份</Radio>
            <Radio :label="1">城市</Radio>
        </RadioGroup>
        <Select
          v-if="bloc.range3==0"
          v-model="bloc.province3"
          style="width: 200px; margin-right: 10px"
          placeholder="省份"
          clearable
          filterable
        >
          <Option
            v-for="(item, index) in bloc.provinceList"
            :key="index"
            :value="item.name"
            >{{ item.name }}</Option
          >
        </Select>
        <DatePicker
          type="daterange"
          placeholder="统计时间"
          format="yyyy/MM/dd"
          v-model="bloc.date3"
          :clearable="false"
          style="width: 200px; margin-right: 10px"
        />
        <Button
          type="primary"
          icon="ios-search"
          size="default"
          @click="getRegionCount()"
          >查询
        </Button>
      </Row>
      <Row
        type="flex"
        justify="space-between"
        class="code-row-bg"
        style="padding: 20px 20px 60px 20px; height: 500px"
        :gutter="50"
      >
        <div id="myChart5" :style="{ width: '100%', height: '100%' }"></div>
      </Row>
      <Row
        type="flex"
        justify="space-between"
        class="code-row-bg"
        style="padding: 20px 20px 60px 20px; height: 500px"
        :gutter="50"
      >
        <div id="myChart6" :style="{ width: '100%', height: '100%' }"></div>
      </Row>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import { ChartBarAxis, ChartLine } from "@/component/charts";
import { DataBloc } from "./DataBloc";
import { Route } from "vue-router";

// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

@Component({
  components: { ChartBarAxis, ChartLine },
})
export default class extends Vue {
  @Prop({ type: Number }) readonly init!: number;
  bloc = new DataBloc();

  created() {
    console.log(this.bloc);
    Promise.race([]).then((res) => {
      console.log(this.bloc);
    });
  }
  mounted() {
    this.getData();
  }
  async getData() {
    this.bloc.getPeopleSex();
    await this.bloc.getPeopleHobby();
    await this.bloc.getPeopleCareer();
    await this.bloc.getProvince();
    await this.bloc.getModel();
    let myChart2 = echarts.init(document.getElementById("myChart2"));
    let myChart3 = echarts.init(document.getElementById("myChart3"));
    myChart2.setOption(this.bloc.optionsHobby);
    myChart3.setOption(this.bloc.optionsCareer);
    await this.getPeopleRegister();
    this.getMemberWeekRegister();
    this.getRegionCount();
  }
  async getPeopleRegister() {
    let myChart = echarts.init(document.getElementById("myChart"));
    myChart.showLoading();

    await this.bloc.getPeopleRegister();
    myChart.setOption(this.bloc.optionsRegister);
    myChart.hideLoading();
  }
  async getMemberWeekRegister() {
    let myChart4 = echarts.init(document.getElementById("myChart4"));
    myChart4.showLoading();
    await this.bloc.getMemberWeekRegister();
    myChart4.setOption(this.bloc.options2);
    myChart4.hideLoading();
  }
  async getRegionCount(){
    this.getDeviceRegion();
    this.getMemberRegion();
  }
  async getDeviceRegion() {
    let myChart5 = echarts.init(document.getElementById("myChart5"));
    myChart5.showLoading();
    await this.bloc.getDeviceRegion();
    myChart5.setOption(this.bloc.options5);
    myChart5.hideLoading();
  }
  async getMemberRegion() {
    let myChart6 = echarts.init(document.getElementById("myChart6"));
    myChart6.showLoading();
    await this.bloc.getMemberRegion();
    myChart6.setOption(this.bloc.options6);
    myChart6.hideLoading();
  }

  // beforeRouteUpdate(to: Route, from: Route, next: (vm: any) => void) {
  //   next(vm => {
  //     Promise.race([vm.bloc.getDevcieDistribute(1, 10, this.bloc.model), vm.bloc.getDeviceFaultNum(),
  //       vm.bloc.getDeviceUseModelLifetime(), vm.bloc.getDeviceUseModeUse(), vm.bloc.getDeviceStatusNum()])
  //       .then(res => {
  //         console.log(vm.bloc.modelNum)
  //       })
  //   });
  // }
}
</script>
<style lang="less" scoped>
.top {
  width: 100%;
  // height: 1000px;
  border-bottom: 1px solid #f2f2f2;
  margin-bottom: 20px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(242, 242, 242, 1);
}
</style>
